<!--
  Copyright © 2017 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="modal-header">
  <h3 class="modal-title pull-left" data-cy="upgrade-modal-header">
    {{ PipelineUpgradeController.isImport ? "Import Pipeline" : "Upgrade Pipeline" }}</h3>
  <div class="btn-group pull-right">
    <a class="btn" ng-click="$close()">
      <span class="fa fa-times"></span>
    </a>
  </div>
</div>

<div
  class="modal-body"
  ng-if="PipelineUpgradeController.loading"
  data-cy="upgrade-modal-loading"
>
  <h3 class="text-xs-center">
    <span class="fa fa-spin fa-spinner">
  </h3>
</div>

<div
  class="modal-body"
  ng-if="!PipelineUpgradeController.loading"
  data-cy="upgrade-modal-body"
>
  <h4 ng-if="PipelineUpgradeController.missingArtifactStages.length > 0 || PipelineUpgradeController.problematicStages.length > 0 || PipelineUpgradeController.problematicPostRunActions.length > 0 || PipelineUpgradeController.missingArtifactPostRunActions.length > 0">
    {{ PipelineUpgradeController.isImport ? "Your pipeline cannot be imported because of the following issues:" : "Your pipeline has the following issues:" }}
  </h4>

  <div
    class="row import-error-row"
    ng-if="PipelineUpgradeController.fixAllDisabled"
  >
    <div class="col-xs-12">
      <h4>Missing Plugin Artifacts</h4>

      <ul>
        <li ng-repeat="(key, stage) in PipelineUpgradeController.missingArtifactsMap">
          {{ stage.stageInfo.plugin.name }} <em>({{ stage.stageInfo.plugin.artifact.name }} {{ stage.stageInfo.plugin.artifact.version }}) </em>
        </li>
      </ul>

      <div>
        <button
          class="btn btn-primary"
          ng-click="PipelineUpgradeController.openMarket()"
        >
          Find Plugin in Hub
        </button>
      </div>
    </div>
  </div>

  <div
    class="row import-error-row"
    ng-if="!PipelineUpgradeController.pipelineArtifact"
  >
    <div class="col-xs-12">
      <h4>Pipeline Artifact</h4>

      <span>
        <em>{{ PipelineUpgradeController.pipelineConfig.artifact.name }}</em> artifact version {{ PipelineUpgradeController.pipelineConfig.artifact.version }} needs to be upgraded to {{ PipelineUpgradeController.cdapVersion }}
      </span>
    </div>
  </div>

  <div
    class="row import-error-row"
    ng-repeat="stage in PipelineUpgradeController.canUpgradeStages.concat(PipelineUpgradeController.problematicStages, PipelineUpgradeController.problematicPostRunActions)"
    data-cy="import-error-row-{{$index}}"
  >
    <div class="col-xs-12">
      <h4 class="stage-title {{ stage.type }} {{ stage.stageInfo.plugin.type }}">
        <span class="fa fa-fw {{ stage.icon }}"></span>
        {{ stage.stageInfo.name }}
      </h4>

      <div ng-if="stage.error === 'VERSION_MISMATCH'">
        <div class="error-description">
          There is a different version available for plugin artifact <em>{{ stage.stageInfo.plugin.artifact.name }}</em>.
        </div>

        <div class="error-suggestion">
          <span>
            <strong>Imported Version:</strong>
            {{ stage.stageInfo.plugin.artifact.version }}
          </span>
          <span>
            <strong>Available Version:</strong>
            {{ stage.suggestion.version }}
          </span>
        </div>
      </div>

      <div ng-if="stage.error === 'CAN_UPGRADE'">
        <div class="row">
          <div class="col-xs-8">
            <div class="error-description">
              A newer version of this plugin exist.
            </div>

            <div class="error-suggestion">
              <span>
                <strong>Imported Version:</strong>
                {{ stage.stageInfo.plugin.artifact.version }}
              </span>
              <span>
                <strong>Newer Version:</strong>
                {{ stage.suggestion.version }}
              </span>
            </div>
          </div>

          <div class="col-xs-4 text-right">
            <div class="checkbox">
              <label>
                <input
                  type="checkbox"
                  ng-model="stage.upgrade"
                > Upgrade
              </label>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="stage.error === 'SCOPE_MISMATCH'">
        <div class="error-description">
          The plugin artifact <em>{{ stage.stageInfo.plugin.artifact.name }}</em> exists in different scope.
        </div>

        <div class="error-suggestion">
          <span>
            <strong>Imported Scope:</strong>
            {{ stage.stageInfo.plugin.artifact.scope }}
          </span>
          <span>
            <strong>Available Scope:</strong>
            {{ stage.suggestion.scope }}
          </span>
        </div>
      </div>
    </div>
  </div>

</div>

<div
  class="modal-footer"
  ng-if="!PipelineUpgradeController.loading"
>
  <button
    class="btn btn-primary"
    ng-click="PipelineUpgradeController.fixAll()"
    data-cy="fix-all-btn"
  >
    <span ng-if="!PipelineUpgradeController.fixAllDisabled">Fix All</span>
    <span ng-if="PipelineUpgradeController.fixAllDisabled">Proceed</span>
  </button>
  <button
    class="btn btn-default"
    ng-click="$close()"
  >
    Cancel
  </button>
</div>
